<template>
	<div class="web-search">
		<div class="search-header">
			<div class="search-form">
				<el-input placeholder="请输入内容" v-model="queryParams.title"></el-input>
				<div class="search-btn" @click="queryCourse()">搜索</div>
			</div>
		</div>
		<div class="search-box">
			<div class="search-wrap">
				<div class="search-content">
					<div class="search-classify">
						<div class="all-content">
							<div class="all-label">全部课程<span>({{ total }})</span></div>
						</div>
					</div>
					<div class="search-course-list">
						<div class="search-item" v-for="item in courseList" :key="item.id"
						@click="handleShopDetail(item.id)">
							<img class="course-img" :src="baseUrl+item.imageUrl" alt="">
							<div class="course-info">
								<div class="course-title">{{ item.title }}</div>
								<div class="course-desc">{{ item.description }}</div>
								<div class="course-classify">
									<span class="course-teach">{{ item.categoryName }}</span>
								</div>
							</div>
						</div>
					</div>
					<pagination
						class="page"
						v-show="total>0"
						:total="total"
						:layout="'total, prev, pager, next'"
						:page.sync="pages.pageNum"
						:limit.sync="pages.pageSize"
						@pagination="pageCourse"
						/>
				</div>
				<div class="search-recommend">
					<div class="search-keywords">
						<div class="hot-search">
							<div class="search-label">热搜关键词</div>
							<div class="tags">
								<el-tag type="danger" v-for="(item, index) in keywords" :key="index"
								@click="handleKeyword(item)">{{item}}</el-tag>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { listCourse } from '@/api/web/index'
export default {
	name: 'WebSearch',
	data() { 
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			//查询参数
			queryParams: {
				title: ''
			},
			pages: {
				pageNum: 1,
				pageSize: 10,
			},
			//总数
			total: 0,
			//课程列表
			allCourseList: [],
			courseList: [],
			//热搜关键词
			keywords: [ 'Vue', 'Java', '嵌入式', 'Python', 'SpringBoot', 'C/C++', '算法']
		}
	},
	mounted() { 
		this.queryParams.title = this.$route.query.title ? this.$route.query.title : ''
		this.queryCourse();
	},
	methods: {
		/**
		 * 查询列表
		 */
		async queryCourse() { 
			let res = await listCourse({
				title: this.queryParams.title
			});
			if (res.code == 200) { 
				this.courseList = res.rows.slice(0, 10);
				this.allCourseList = res.rows;
				this.total = res.rows.length;
			}
		},
		/**
		 * 详情
		 */
		handleShopDetail(id) { 
			this.$router.push({
				path: '/webDetail',
				query: { id }
			})
		},
		/**
		 * 热搜词
		 * @param item 
		 */
		handleKeyword(item) { 
			this.queryParams.title = item;
			this.queryCourse();
		},
		/**
		 * 分页
		 */
		pageCourse() { 
			let s = (this.pages.pageNum - 1) * this.pages.pageSize;
			let e = this.pages.pageNum * this.pages.pageSize;
			this.courseList = this.allCourseList.slice(s, e);
		}
	}
}
</script>

<style lang="scss" scoped>
.web-search {
	width: 100%;
	.search-header {
		position: sticky;
		top: 70px;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(28,31,33,.06);
		.search-form {
			height: 48px;
			width: 840px;
			margin: 0 auto;
			position: relative;
			display: flex;
			flex-direction: row;
			.el-input {
				flex: 1;
			}
			.search-btn {
				background: #97c225;
				width: 104px;
				height: 48px;
				line-height: 48px;
				font-size: 16px;
				text-align: center;
				color: #fff;
				cursor: pointer;
			}
		}
	}
	.search-box {
		width: 100%;
		padding: 30px 0;
		background-color: #f3f5f6;
		.search-wrap {
			width: 1230px;
			display: flex;
			flex-direction: row;
			margin: 0 auto;
			background-color: #fff;
			padding-bottom: 30px;
			.search-content {
				width: 800px;
				min-height: 400px;
			}
			.search-recommend {
				width: 430px;
			}
		}
		.search-classify {
			width: 100%;
			.all-content {
				width: 100%;
				padding: 20px;
    			border-bottom: 1px solid #f3f5f6;
				.all-label {
					height: 24px;
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					color: #545c63;
					font-size: 16px;
    				font-weight: 700;
					> span {
						font-size: 12px;
						color: #9199a1;
						font-weight: 700;
						margin-left: 5px;
					}
				}
			}
			.filter-box {
				width: 100%;
				padding: 20px;
				border-bottom: 1px solid #f3f5f6;
				display: flex;
				flex-direction: row;
				align-items: center;
				.filter {
					margin-right: 30px;
					.el-dropdown-link {
						cursor: pointer;
					}
				}
			}
		}
		.search-course-list {
			width: 100%;
			padding-bottom: 20px;
			.search-item {
				width: 100%;
				padding: 20px;
				border-bottom: 1px solid #f3f5f6;
				display: flex;
				flex-direction: row;
				.course-img {
					width: 140px;
					height: 90px;
					flex-shrink: 0;
				}
				.course-info {
					padding-left: 30px;
					.course-title {
						width: 584px;
						font-size: 16px;
						line-height: 32px;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						transition: all 0.2s ease-in-out;
						&:hover {
							color: #ec1500;
						}
					}
					.course-desc {
						color: #4d555d;
						font-size: 12px;
						line-height: 24px;
					}
					.course-classify {
						display: flex;
						width: 100%;
						flex-direction: row;
						justify-content: flex-end;
						.course-teach {
							color: #4d555d;
    						font-size: 12px;
						}
					}
				}
			}
		}
		.search-keywords {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.hot-search,
			.relate-search {
				width: 320px;
				margin-top: 20px;
			}
			.search-label {
				font-size: 16px;
				font-weight: 700;
				color: #07111b;
			}
			.tags {
				padding: 15px 0;
				.el-tag {
					margin: 0 10px 10px 0;
					cursor: pointer;
				}
			}
		}
	}
}

::v-deep .search-form .el-input__inner {
	height: 48px;
	line-height: 48px;
	color: #93999f;
    width: 736px;
    background: #f1f1f1;
	border-radius: 0;
}
::v-deep .search-form .el-input__inner:focus {
	border-color: #97c225;
}
</style>